<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>弧形运动效果</title>
    <style type="text/css">
        body {
            margin: 0;
            background: #111;
            text-align: center;
        }

        h1 {
            font-size: 14px;
            font-family: "Microsoft Yahei";
            text-align: center;
        }

        .stage {
            width: 120px;
            height: auto;
            margin: 0 auto;
            position: relative;
            -webkit-transform-origin: center top;
            -webkit-transform: rotate(-30deg);
            -webkit-animation: sway 2.2s infinite alternate ease-in-out;
        }

        .watch {
            width: 100%;
            height: auto;
        }

        .seconds {
            position: absolute;
            width: 8%;
            height: auto;
            bottom: 11.5%;
            left: 45.5%;
            -webkit-transform-origin: center 72.4%;
            -webkit-animation: second 60s infinite linear;
        }

        @-webkit-keyframes second {
            to {
                -webkit-transform: rotate(355deg);
            }
        }

        @-webkit-keyframes sway {
            to {
                -webkit-transform: rotate(30deg);
            }
        }
    </style>
</head>
<body>
<h1>请使用webkit内核标准浏览器查看效果</h1>
<div class="stage">
    <img src="http://p0.qhimg.com/t0197c451833414523e.png" alt="钟表" class="watch"/>
    <img src="http://p9.qhimg.com/t0145f1ae8ad6753b05.png" alt="秒针" class="seconds">
</div>
</body>
</html>